<template>

	<view class="content">

		<view class="content-top">
			<view class="content-title">
				<text>设备异常</text>
			</view>
			<hr>
			<u-form :model="formData" ref="formData" style="margin-top: 24rpx;">
				<u-row gutter="100">
					<u-col span="5">
						<u-form-item :border-bottom="false" label="生产订单:" label-width='150rpx' prop="workorderCode">
							<u-input v-model="formData.workorderCode" disabled placeholder="" />
						</u-form-item>
					</u-col>
					<u-col span="5">
						<u-form-item :border-bottom="false" label="发布工单:" label-width='150rpx' prop="releaseOrderCode">
							<u-input v-model="formData.releaseOrderCode" disabled placeholder="" />
						</u-form-item>
					</u-col>
					<u-col span="5">
						<u-form-item :border-bottom="false" label="产品牌号:" prop="productName" label-width='150rpx'>
							<u-input :disabled="true" v-model="formData.productName" placeholder="" />
						</u-form-item>
					</u-col>
					<u-col span="5">
						<u-form-item :border-bottom="false" label="生产批号:" prop="batchCode" label-width='150rpx'>
							<u-input :disabled="true" v-model="formData.batchCode" placeholder="" />
						</u-form-item>
					</u-col>
					<u-col span="5">
						<u-form-item :border-bottom="false" label="当前产线:" label-width='150rpx' prop="worklineName">
							<u-input v-model="formData.worklineName" disabled placeholder="" />
						</u-form-item>
					</u-col>
					<u-col span="5">
						<u-form-item :border-bottom="false" label="设备名称:" label-width='150rpx' prop="machineryName">

							<u-input v-model="formData.machineryName" disabled placeholder="" />
							<u-icon slot="right" name="arrow-right" @click="showMachinery=true"></u-icon>
							<u-select v-model="showMachinery" :list="machineryList" value-name="machineryId"
								label-name="machineryName" @confirm="machineryConfirm"></u-select>

						</u-form-item>
					</u-col>


					<u-col span="5">
						<u-form-item label="异常时间" prop="requireDate" :border-bottom="false" label-width='150rpx'>
							<u-input v-model="formData.requireDate" disabled disabledColor="#ffffff"
								placeholder=""></u-input>
						</u-form-item>
					</u-col>
				</u-row>

			</u-form>
			<u-form :model="form1" ref="uForm">
				<u-form-item :border-bottom="false">
					<view style="display: flex; margin: 0 auto;">
						<u-button @click="submit" type="primary" size="medium"><u-icon name="arrow-upward"></u-icon>提交
						</u-button>
						<view style="width:20px">

						</view>
						<u-button @click="cancel" type="primary" size="medium"><u-icon name="close"></u-icon>取消
						</u-button>
					</view>
				</u-form-item>
			</u-form>
		</view>
		<u-toast ref="uToast" />

	</view>
</template>

<script>
	import DefectiveProduct from './DefectiveProduct.vue'
	export default {
		components: {
			DefectiveProduct
		},
		props: {
			workorder: null
		},
		data() {
			return {
				uLoading: false,
				type: 'textarea',
				border: true,
				height: 50,
				autoHeight: true,
				show: false,
				border: true,
				form1: {},
				value: '',
				data_index: "report",
				formData: {

				},
				data_list: [],
				loading: false,
				// tab栏
				data_tabList: [{
					value: "历史报工",
					key: "report",
				}, ],
				statusList: [],
				gznTabs: [],
				gznWrap: [],
				showWrap: false,
				showTabs: false,
				// 报工历史数据
				itemList: [],
				rules: {
					machineryName: {
						type: 'string',
						required: true,
						message: '请选择设备',
						trigger: ['blur', 'change']
					},

				},
				// 产品弹框
				showDefectiveProduct: false,
				// 产品类型
				/* 
				 defectiveProduct	不良品
				 recyclingScrap		洗机料
				 crushedMaterial	待回收
				 */
				popuptype: 'defectiveProduct',
				productType: '',
				showMachinery: false,
				machineryList: []
			};
		},

		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.formData.setRules(this.rules)
		},


		mounted() {
			this.formData = JSON.parse(JSON.stringify(this.workorder));
			this.machineryList = this.formData.mdWorklineMachineList;
			this.formData.requireDate = this.getCurrentDateTime()


		},
		methods: {
			// 获取当前日期
			getCurrentDateTime() {
				const now = new Date();

				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, "0"); // 月份从 0 开始，需要加 1
				const day = String(now.getDate()).padStart(2, "0");

				const hours = String(now.getHours()).padStart(2, "0");
				const minutes = String(now.getMinutes()).padStart(2, "0");
				const seconds = String(now.getSeconds()).padStart(2, "0");

				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			// 确认选择设备
			machineryConfirm(arr) {
				console.log('arr', arr)
				this.formData.machineryId = arr[0].value;
				this.formData.machineryName = arr[0].label;
			},

			// 取消提交
			cancel() {
				this.formData = {};
				this.itemList = []
				this.$refs.formData.resetFields()
				this.$emit("close-popup"); // 触发父组件的关闭事件
			},

			submit() {

				this.uLoading = true
				if (this.formData.machineryId && this.formData.machineryId != '') {
					this.$u.api.getAutoCode('REPAIR_CODE').then(res => {
						this.formData.repairCode = res
						this.$u.api.addRepair(this.formData).then(res => {
							if (res.code == 200) {

								uni.showToast({
									title: '操作成功',
									//将值设置为 success 或者直接不用写icon这个参数
									icon: 'success',
									//显示持续时间为 2秒
									duration: 2000
								})
								setTimeout(() => {
									this.formData = {}
									this.cancel()
									this.$refs.formData.resetFields()

								}, 1000)
							} else {

								uni.showToast({
									title: res.msg,
									//将值设置为 success 或者直接不用写icon这个参数
									icon: 'error',
									//显示持续时间为 2秒
									duration: 2000
								})
							}
							this.uLoading = false

						})
					})

				} else {
					this.uLoading = false
					uni.showToast({
						title: '请选择设备',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'error',
						//显示持续时间为 2秒
						duration: 2000
					})
				}



			},






		},
	};
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		padding: 20rpx;

		.content-title {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-weight: 600;
			margin: 10px;
		}

		.content-top {
			padding: 20rpx;
			height: 10%;
			width: 100%;
		}

		.content-bottom {
			display: flex;
			flex: 1;
			flex-direction: column;
			margin-top: 20rpx;
			padding: 30rpx;
		}

		.tab-content {
			width: 100%;
			position: relative;

			.tabs {
				display: flex;
				position: relative;
				color: rgb(70, 71, 72);
				border-bottom: 2rpx solid rgb(193, 193, 193);

				.tabs-item {
					margin-right: 80rpx;
					cursor: pointer;
					font-size: 32rpx;

					&.active {
						color: #2979ff;
						z-index: 9;

						&::after {
							content: "";
							bottom: -4rpx;
							left: 0;
							right: 0;
							height: 4rpx;
							background: #2979ff;
						}
					}
				}
			}

			.tab-list {
				display: flex;
				align-items: center;
				width: 100%;
				margin: 20rpx 0;
			}
		}
	}
</style>